<script setup lang="ts">
import {sidebarItems, systemTitle} from "@/router/sidebar";
import {useRouter} from "vue-router";
import {reactive} from "vue"; useRouter();
import picture from '@/assets/img/卡卡西.jpg'
const siderbarItems = sidebarItems
const router = useRouter()
let nowPage = reactive({
  name: '首页'
})
const toPage = (item)=>{
  nowPage.name = item.name
  router.replace(item.path)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background: #b7aeae; height: 100vh; overflow: auto">
        <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;margin-bottom: 30px">
          <span style="font-size: 25px; color: #203f5e">{{systemTitle}}</span>
        </div>
<!--        <div>-->
<!--          <RouterLink to="/">首页</RouterLink>-->
<!--        </div>-->
<!--        <div>-->
<!--          <RouterLink to="/about">about</RouterLink>-->
<!--        </div>-->
        <div v-for=" item in siderbarItems" >
          <div
              style="display: flex; justify-content: center;align-items: center; height: 50px"
              :class="nowPage.name == item.name ? 'check-item-style':''"
              @click="toPage(item)"
          >
            <el-button
                type="text"
                @click="toPage(item)"
                class=" siderbar-item-style">
              {{item.name}}
            </el-button>
          </div>
<!--          <RouterLink :to="item.path">{{item.name}}</RouterLink>-->
        </div>
      </el-aside>
      <el-container>
        <el-header style="background-color: #f8d4d4; display: flex; justify-content: space-between;align-items: center">
          <span>欢迎使用，用户zzz</span>
          <el-image fit="fill" :src="picture" style="width: 50px; height: 50px; border-radius: 50%;"></el-image>
        </el-header>
        <el-main>

          <div style="height: 85vh;overflow: auto;">
            <div>
              <span style="font-weight: 800">{{nowPage.name}}</span>
            </div>
            <el-card style="margin-top: 5px">
              <RouterView></RouterView>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
.siderbar-item-style{
  font-size: 18px;
  color: white;
}
.check-item-style{
  background-color: #203f5e;
}
</style>
